<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <!-- bootstrap-datetimepicker -->
    <link href="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <style>
        .select-box select.form-control{ width: 140px;}
    </style>
</head>
<body>
<input id="p_view"  value="1" type="hidden">
<input id="p_update"  value="1" type="hidden">
<input id="p_add"  value="1" type="hidden">
<div class="content-header">
    <h5>流程审批</h5>
</div>

<div class="panel panel-lzy">
    <div class="panel-body">
        <h5 class="tips-lzy">操作提示</h5>
        <ul class="tips-list-lzy">
            <li><span>◆&nbsp;该页面显示了平台所有的审核申请，可对审核进行查看编辑操作。</span></li>
            <li><span>◆&nbsp;可输入关键字或选择项进行相关查询（可单项查询）。</span></li>
        </ul>
    </div>
</div>

<div class="panel panel-f5">
    <div class="panel-body row item-right">
        <form id="myForm" class="form-inline form-margin-right">
            <div class="form-group" style="width: 540px;">
                <span style="float: left; line-height: 35px;">需审核的操作：</span>
                <div class="select-box">
                    <select class="module form-control" id="module">
                        <option value="">请选择</option>
                    </select>
                    <select class="list form-control" id="list">
                        <option value="">请选择</option>
                    </select>
                    <select class="func form-control" id="resourceId">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <span>是否可用：</span>
                <select class="form-control required" id="status">
                    <option value="" >请选择</option>
                    <option value="0" >可用</option>
                    <option value="1" >不可用</option>
                </select>
            </div>
        <#--<%--<div class="form-group">--%>-->
        <#--<%--<span>申请人：</span>--%>-->
        <#--<%--<input type="text" class="form-control" id="applicantName" placeholder="输入查询申请人姓名">--%>-->
        <#--<%--</div>--%>-->
        <#--<%--<div class="form-group">--%>-->
        <#--<%--<span>经办人：</span>--%>-->
        <#--<%--<input type="text" class="form-control" id="processAssigneeName" placeholder="输入查询经办人姓名">--%>-->
        <#--<%--</div>--%>-->
            <div class="form-group">
                <input id="userId" value="1" type="hidden">
                <button type="button" class="btn btn-primary btn-sm" onclick="search(1)">查询</button>
                <button type="button" class="btn btn-primary btn-sm" onclick="$('#myForm')[0].reset();">重置</button>
            </div>
        </form>
    </div>

    <div class="panel-heading row">
    <#--<%--<shiro:hasPermission name="approval:event:add">--%>-->
        <button type="button" class="btn btn-primary" onclick="addEvent();"><span class="fa fa-plus"></span> 新增</button>
    <#--<%--</shiro:hasPermission>--%>-->
    </div>
    <!-- 分页查询的地址-->
    <div class="panel-body panel-white">
        <div class="table-responsive">
            <table id="myTable"
                   class="table table-hover"
                   data-url="${pageContext.request.contextPath}/admin/event/json"
                   data-pageSize="10,50,100" data-method="GET">
                <thead>
                <tr>
                    <th data-type="xuhao" >序号</th>
                    <th data-field="name">审核事件</th>
                    <th data-field="processAssigneeName">审核流程</th>
                    <th data-field="statusName" data-call="true">状态</th>
                    <th data-field="button" data-call="true">操作</th>
                </tr>
                </thead>
                <tbody id="tbodyId">
                </tbody>
            </table>
        </div>
        <!-- 分页条-->
        <div class="row">
            <div align="left" class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-addon" id="pageCount"></span>
                    <select id="pageSize" onchange="search(1)" class="form-control" style="width: 100px"></select>
                </div>
            </div>
            <div align="right" class="col-xs-6">
                <ul class="pagination" id="pagination"></ul>
            </div>
        </div>
    </div>
</div>

<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap/js/utils.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap/plugin/jqPaginator/myPage.js"></script>
<!-- bootstrap-datetimepicker -->
<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    $(function () {
        //下拉框获取值
        var $mod = $(".select-box .module");
        var $list = $(".select-box .list");
        var $func = $(".select-box .func");
        $.ajax({
            type: "GET",
            url: "${basePath}/admin/resource/first/json?id=0",
            dataType: "json",
            async: "true",
            data: {},
            success: function (data) {
                var temp = "";
                for(var i in data){
                    temp += "<option value='"+data[i].id+"'>"+data[i].name+"</option>"
                }
                $mod.append(temp);
            },
            error: function () {
                console.log("请求失败")
            }
        });
        $mod.change(function(){
            $list.html('<option value="">请选择</option>');
            var secId = $mod.val();
            if(secId){
                $.ajax({
                    type: "GET",
                    url: "${basePath}/admin/resource/menu/json?id="+secId,
                    dataType: "json",
                    async: "true",
                    data: {},
                    success: function (data) {
                        var temp = "";
                        for(var i in data){
                            temp += "<option value='"+data[i].id+"'>"+data[i].name+"</option>"
                        }
                        $list.append(temp);
                    },
                    error: function () {
                        console.log("请求失败")
                    }
                });
            }
        });
        $list.change(function(){
            $func.html('<option value="">请选择</option>');
            var thirdId = $list.val();
            if(thirdId){
                $.ajax({
                    type: "GET",
                    url: "${basePath}/admin/resource/func/json?id="+thirdId,
                    dataType: "json",
                    async: "true",
                    data: {},
                    success: function (data) {
                        var temp = "";
                        for(var i in data){
                            temp += "<option value='"+data[i].id+"'>"+data[i].name+"</option>"
                        }
                        $func.append(temp);
                    },
                    error: function () {
                        console.log("请求失败")
                    }
                });
            }
        })

        // 绑定
        $("#applicantName").keydown(function(event){
            if(event.which == "13") {
                search(1);
                return false;
            }
        });
        $("#processAssigneeName").keydown(function(event){
            if(event.which == "13") {
                search(1);
                return false;
            }
        });
    });
    // 循环列表数据以及操作按钮
    function tableCallBack(data, id){
        if(id == 'statusName') {
            // 审核状态 0：未审核 1：已审核，未通过2：已通过
            if (data[id] == "不可用") {
                return '<span class="text-red">不可用</span>';
            }
            else{
                return '<span class="text-green">可用</span>';
            }
        } else if(id == 'button') {
            // 增加操作按钮
            var _button = '';
            var count = 0;
            if ($('#p_update').val() == 1) {
                _button += '<button type="button" class="btn btn-white btn-xs" onclick="edit(\'' + data.id + '\');">编辑 </button> ';
                count ++
            }
            if (data.status == 1) {
                _button += '<button type="button" class="btn btn-white btn-xs" onclick="startUser(\'' + data.id + '\');">启用 </button> ';
            }
            if (data.status == 0) {
                _button += '<button type="button" class="btn btn-white btn-xs" onclick="cancelUser(\'' + data.id + '\');">禁用</button> ';
            }
            count ++
            return _button;
        } else {
            if(data[id] == null || data[id] == ''){
                return '';
            } else {
                return data[id];
            }
        }
    }

    // 启用
    function startUser(id){
        $.ajax({
            type: "POST",
            url: "${basePath}/admin/event/startUser?id=" + id,
            dataType: "json",
            async: "true",
            success: function (data) {
                if (data.code == '0') {
                    layer.alert('启用成功!', {
                        icon: 6
                    }, function(index){
                        layer.closeAll();
                        search(parseInt($('.active').attr('jp-data')));
                    });
                } else {
                    layer.alert(data.desc, {
                        icon: 56
                    });
                }
            }
        });
    }

    // 禁用
    function cancelUser(id){
        $.ajax({
            type: "POST",
            url: "${basePath}/admin/event/cancelUser?id=" + id,
            dataType: "json",
            async: "true",
            success: function (data) {
                if (data.code == '0') {
                    layer.alert('禁用成功!', {
                        icon: 6
                    }, function(index){
                        layer.closeAll();
                        search(parseInt($('.active').attr('jp-data')));
                    });
                } else {
                    layer.alert(data.desc, {
                        icon: 56
                    });
                }
            }
        });
    }

    //编辑
    function edit(id){
        layer.open({
            type: 2,
            area: ['70%', '80%'],
            title: ['编辑审核', 'text-align:center;'],
            content: ['${basePath}/admin/event/toEdit/' + id, 'yes'],
            end: function(){
                layer.closeAll('dialog');
                search(parseInt($('.active').attr('jp-data')));
            }
        });
        //location.href = '${basePath}/admin/event/toEdit/' + id;
    }

    //新增
    function addEvent() {
        layer.open({
            type: 2,
            area: ['70%', '80%'],
            title: ['新增审核', 'text-align:center;'],
            content: ['${basePath}/admin/event/create', 'yes'],
            end: function () {
                window.location.reload();
            }
        });
    }
</script>
</body>
</html>